/<template>
  <div class="Expert">
    <div v-for="(item, index) in ExpertVillage" :key="index" class="box">
      <div class="box1">
        <img :src="item.prelogo" alt="" />
        <span>{{ item.cname }}</span>
      </div>
      <div class="box2">
        <p>{{ item.content }}</p>
        <div class="box2_img" >
          <img :src="item" alt=""  v-for="(item, index) in item.medias" :key="index"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ExpertVillage from "../../../mock/home/ExpertVillage.json";
console.log(ExpertVillage);
export default {
  data() {
    return {
      ExpertVillage: ExpertVillage,
    };
  },
};
</script>

<style lang="scss" scoped>
.Expert {
  width: 100%;
  height: 100%;
  .box {
    width: 95%;
    display: flex;
    flex-direction: column;
    .box1 {
      width: 100%;
      height: 80%;
      display: flex;
      > img {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
      }
    }
    .box2{
         width: 90%;
         margin-left: 20rpx;
          >div{
                width: 100%;
                height: 300rpx;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                >img{
                      width: 30%;
                      height: 45%;
                }
          }
    }
  }
}
</style>